@charset "UTF-8";

/* --- all～ --- */

#wrap {
        position                     : relative;
        margin                       : 0 auto;
        border                       : 20px solid white;
        border-bottom                : 5px solid white;
        padding                      : 0px;
        width                        : 760px;
}

#container {
        position                     : relative;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        width                        : 760px;
        background                   : url("../images/wrapback.gif") repeat-y left top;
}



/* ---- header ---- */

#header {
  position: relative;
  width: 760px;
  height: 140px;
  animation: switchBackground 10s forwards;
  background-image: url("../images/70hp_2.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* 擬似要素で2枚目の背景を重ねる */
#header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/header.gif");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  animation: fadeIn 10s forwards;
}

/* 徐々にフェードインするアニメーション */
@keyframes fadeIn {
  0% { opacity: 0; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}





#header h1 {
        font-size                     : 1px;
        color                         : white;
        margin                        : 0px;
        border                        : 0px;
        padding                       : 0px;
        text-indent                   : -9999px;
        text-align                    : left;
}



/* ---- contents ---- */

#contents {
        position                     : relative;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        width                        : 760px;
        background                   : transparent;
}



/* ---- navi ---- */

#nav {
        position                     : relative;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        float                        : left;
        width                        : 160px;
        background                   : transparent;
}

#nav ul {
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        padding-top                  : 40px;
        list-style                   : none;
}

#nav li {
        display                      : block;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        color                        : white;
        background                   : transparent;
}

#nav li a {
        display                      : block;
        width                        : 160px;
        height                       : 50px;
        text-indent                  : -9999px;
        text-decoration              : none;
/* \*/
        overflow : hidden;
/* */
        outline : none;
}


/* ---- navi banner ---- */

#nav ul.banner {
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        padding-top                  : 36px;
        list-style                   : none;
}

#nav ul.banner li {
        display                      : block;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        color                        : white;
        background                   : transparent;
}

#nav ul.banner li a {
        display                      : block;
        width                        : 160px;
        height                       : 80px;
        text-indent                  : -9999px;
        text-decoration              : none;
/* \*/
        overflow : hidden;
/* */
        outline : none;
}


/* ---- navi images ---- */

#nav-home a       { background           : url("../images/nav_home.jpg") no-repeat left top; }
#nav-home a:hover { background           : url("../images/nav_home.jpg") no-repeat left bottom; }
#nav-home-here a  { background           : url("../images/nav_home.jpg") no-repeat left bottom; }

#nav-news a       { background           : url("../images/nav_news.png") no-repeat left top; }
#nav-news a:hover { background           : url("../images/nav_news.png") no-repeat left bottom; }
#nav-news-here a  { background           : url("../images/nav_news.png") no-repeat left bottom; }

#nav-company a       { background           : url("../images/nav_company.jpg") no-repeat left top; }
#nav-company a:hover { background           : url("../images/nav_company.jpg") no-repeat left bottom; }
#nav-company-here a  { background           : url("../images/nav_company.jpg") no-repeat left bottom; }

#nav-jigyosho a       { background           : url("../images/nav_jigyosho.jpg") no-repeat left top; }
#nav-jigyosho a:hover { background           : url("../images/nav_jigyosho.jpg") no-repeat left bottom; }
#nav-jigyosho-here a  { background           : url("../images/nav_jigyosho.jpg") no-repeat left bottom; }

#nav-gnaiyo a       { background           : url("../images/nav_gnaiyo.jpg") no-repeat left top; }
#nav-gnaiyo a:hover { background           : url("../images/nav_gnaiyo.jpg") no-repeat left bottom; }
#nav-gnaiyo-here a  { background           : url("../images/nav_gnaiyo.jpg") no-repeat left bottom; }

#nav-gjisseki a       { background           : url("../images/nav_gjisseki.jpg") no-repeat left top; }
#nav-gjisseki a:hover { background           : url("../images/nav_gjisseki.jpg") no-repeat left bottom; }
#nav-gjisseki-here a  { background           : url("../images/nav_gjisseki.jpg") no-repeat left bottom; }

#nav-saiyo a       { background           : url("../images/nav_saiyo.jpg") no-repeat left top; }
#nav-saiyo a:hover { background           : url("../images/nav_saiyo.jpg") no-repeat left bottom; }
#nav-saiyo-here a  { background           : url("../images/nav_saiyo.jpg") no-repeat left bottom; }

#nav-mail a       { background           : url("../images/nav_mail.jpg") no-repeat left top; }
#nav-mail a:hover { background           : url("../images/nav_mail.jpg") no-repeat left bottom; }
#nav-mail-here a  { background           : url("../images/nav_mail.jpg") no-repeat left bottom; }

#nav-sitemap a       { background           : url("../images/nav_sitemap.jpg") no-repeat left top; }
#nav-sitemap a:hover { background           : url("../images/nav_sitemap.jpg") no-repeat left bottom; }
#nav-sitemap-here a  { background           : url("../images/nav_sitemap.jpg") no-repeat left bottom; }


/* ---- main ---- */

#main {
        position                     : relative;
        margin                       : 0px;
        border                       : 0px;
        padding                      : 0px;
        float                        : right;
        width                        : 600px;
        background                   : transparent;
}

#main p {
        font-size                     : 12px;
        font-weight                   : normal;
        color                         : dimgray;
        line-height                   : 1.8em;
        margin                        : 0px;
        border                        : 0px;
        padding                       : 0px;
        text-align                    : left;
}

#main p.migitop {
        font-size                     : 10px;
        padding                       : 0px;
        padding-top                   : 80px;
        padding-right                 : 40px;
        padding-bottom                : 10px;
        text-align                    : right;
}


#main p strong {
        font-weight                 : bold;
}



/* ---- clearfix ---- */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */